// 预览组件
import React, { useState, useEffect } from 'react'
import CustomComponents from '@components/custom-components';

export default (props) => {
  const { canvasStyleData, componentData, setisPreview } = props;
  return (
    <>
      <div className="preview-mask"></div>
      <div className="preview-box">
        <div className="tit">
          <span>预览</span>
          <i className="iconfont iconguanbi"
            onClick={() => setisPreview(false)}></i>
        </div>
        <div className="content">
          <div className="preview-canvas-box"
            style={{
              width: canvasStyleData.width,
              height: canvasStyleData.height
            }}>
            {componentData.map((item, idx) => {
              return (
                <div key={idx}
                  style={{ ...item.style, zIndex: idx, transform: `rotate(${item.style.rotate}deg)` }}
                  className="comp-item">
                  <CustomComponents data={item} />
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </>
  );
}

